<template>
  <div class="app-container">
    <el-card>
      <el-form ref="searchForm" :rules="rulesForm" :model="searchForm" inline size="small">
        <el-form-item label="公司名称">
          <el-input v-model="searchForm.companyName" placeholder="请输入企业名称" clearable />
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input v-model="searchForm.creditCode" placeholder="请输入统一社会信用代码" clearable />
        </el-form-item>
         <el-form-item label="查询时间：" prop="startDate">
          <el-date-picker style="width: 200px" v-model="searchForm.startDate" align="right" type="date"
            placeholder="选择开始日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item prop="endDate">
          <el-date-picker style="width: 200px" v-model="searchForm.endDate" align="right" type="date"
            placeholder="选择结束日期" :picker-options="$pickerDateOptions" value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="法人">
          <el-input v-model="searchForm.legalPersonName" placeholder="请输入法人" clearable />
        </el-form-item>
        <el-form-item label="所属省份" prop="pinyin">
          <el-select filterable clearable style="width: 200px" v-model="searchForm.pinyin" placeholder="请选择所属省份">
            <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否小微企业">
          <el-select v-model="searchForm.businessSize" placeholder="请选择" clearable size="small">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="handleSearchList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.data" v-loading="listLoading" border style="width: 100%; margin-top: 20px"
        size="small">
        <el-table-column align="center" prop="id" label="编号" width="80" />
        <el-table-column align="center" prop="companyName" label="公司名称" />
        <el-table-column align="center" prop="taxNumber" label="统一社会信用代码" />
        <el-table-column align="center" prop="legalPersonName" label="法人" />
        <el-table-column align="center" prop="phoneNumber" label="联系方式" />
        <el-table-column align="center" prop="regCapitalLabel" label="企业规模">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.regCapitalLabel == "XL"
                  ? "超大型"
                  : scope.row.regCapitalLabel == "L"
                    ? "大型"
                    : scope.row.regCapitalLabel == "M"
                      ? "中型"
                      : scope.row.regCapitalLabel == "S"
                        ? "小型"
                        : scope.row.regCapitalLabel == "XS"
                          ? "微型"
                          : scope.row.regCapitalLabel == "ML"
                            ? "中高型"
                            : ""
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="establishedDate" label="成立日期" />
        <el-table-column align="center" prop="businessSizeDesc" label="是否小微企业">
        </el-table-column>
        <el-table-column align="center" prop="regLocation" label="注册地址" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pageRight" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </el-card>
    <Detail-ranking ref="Detail"></Detail-ranking>
  </div>
</template>

<script>
import DetailRanking from "./components/DetailRanking.vue";
import { Getenterprise } from "@/api/campanyData";
import { pickerOptions } from "./components/options";
import { getArticleListTree } from "@/api/article";
import Tinymce from "@/components/Tinymce/index.vue";
export default {
  name: "Article",
  components: {
    Tinymce,
    DetailRanking,
  },
  data() {
    return {
      rulesForm: {
        pinyin: [{ required: true, message: "请选择省份", trigger: "change" }],
      },
      provinceList: [
        {
          id: "shaanxi",
          name: "陕西省",
        },
      ],
      searchTime: [],
      props: {
        emitPath: false,
      },
      pickerOptions,
      str: "",
      searchForm: {
        companyName: "",
        creditCode: "",
        legalPersonName: "",
        pinyin: "shaanxi",
        businessSize: "",
        startDate: "",
        endDate: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      cateList: [],
    };
  },
  async created() {
    // const p1 = getProvinceList();
    // Promise.all([p1]).then((res) => {
    //   this.provinceList = res[0].data;
    //   // this.getList();
    // });
    await this.getCateList();
    await this.getList();
  },
  mounted() { },
  methods: {
    
    handleSearchList() {
      this.searchForm.pageNum = 1;
      this.$authDate(this.searchForm.beginTime, this.searchForm.endTime, v => {
        if (!v.type) {
          return this.$message.warning(v.msg);
        } else {
          // console.log(this.searchForm);
          this.getList();
        }
      });
    },
    getCateList() {
      getArticleListTree().then((res) => {
        if (res.code == 200) {
          this.cateList = res.data;
        }
      });
    },
    resetForm(form) {
      // this.searchForm.companyName=''
      this.searchForm.companyName = "";
      this.searchForm.creditCode = "";
      this.searchForm.legalPersonName = "";
      this.searchForm.businessSize = "";
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchTime = [];
      this.getList();
    },
    selecTableItem(row) {
      if (row.publishStatus === 0) {
        return true;
      }
    },

    handleDetail(row) {
      this.$refs.Detail.openDialog(row, this.searchForm.pinyin);
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },

    getList() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.listLoading = true;
          Getenterprise(this.searchForm)
            .then((res) => {
              this.tableData.data = res.data.list;
              this.tableData.total = res.data.total;
              this.listLoading = false;
            })
            .finally(() => {
              this.listLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
